<template>
  <div :class="['bc-range', 'el-input', { 'is-focus': isFocus }]">
    <input
      class="el-input__inner bc-input"
      @focus="isFocus = true"
      @blur="isFocus = false"
      @input="inputChange($event, 0)"
      :placeholder="defaultAttr['start-placeholder']"
      :value="modelValue[0]"
    />
    <div class="bc-range-separator">至</div>
    <input
      class="el-input__inner bc-input"
      @focus="isFocus = true"
      @blur="isFocus = false"
      @input="inputChange($event, 1)"
      :placeholder="defaultAttr['end-placeholder']"
      :value="modelValue[1]"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  modelValue: {
    type: Array,
  },
  config: {
    type: Object,
    default: () => {},
  },
})

// v-model
const emits = defineEmits(['update:modelValue'])
const modelValue = computed(() => {
  if (Array.isArray(props.modelValue) && props.modelValue.length === 2) {
    return props.modelValue
  } else {
    return ['', '']
  }
})
const inputChange = (e, index) => {
  const inputs = modelValue.value
  inputs[index] = e.target.value
  emits('update:modelValue', inputs)
}

// 判断是否聚焦
const isFocus = ref(false)

const defaultAttr = computed(() => {
  // 设置默认绑定值
  let { attrs = {} } = props.config
  // 获取默认项
  attrs['start-placeholder'] = attrs?.placeholder || `请输入起始${props.config.label}`
  attrs['end-placeholder'] = attrs?.placeholder || `请输入结束${props.config.label}`
  return { ...attrs }
})
</script>

<style lang="scss" scoped>
.bc-range {
  width: 100%;
  display: flex;
  align-items: center;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  cursor: text;
  transition: var(--el-transition-box-shadow);
  transform: translate3d(0, 0, 0);
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset;
  padding: 0 11px;
  .bc-input {
    width: 46%;
    line-height: var(--el-input-inner-height);
    height: var(--el-input-inner-height);
    text-align: center;
    font-size: var(--el-font-size-base);
    &::-webkit-input-placeholder {
      color: var(--el-text-color-placeholder);
      font-size: 14px;
    }
  }
  .bc-range-separator {
    flex: 1;
    flex-shrink: 0;
    color: var(--el-text-color-primary);
    font-size: 14px;
    padding: 0 5px;
  }
}
.is-focus {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}
</style>
